<template>
  <div class="xtsz-wrapper">
    <div style="margin-left: 10px;">
      <el-radio-group v-model="currentType" style="margin-bottom: 15px;" @change="getData">
        <el-radio-button label="type1">公司分类</el-radio-button>
        <el-radio-button label="type2">产品属性</el-radio-button>
        <el-radio-button label="type3">一级分类</el-radio-button>
        <el-radio-button label="type4">二级分类</el-radio-button>
        <el-radio-button label="type5">开关数类型</el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-left: 10px;margin-bottom: 15px;">
      <el-button @click="addBigClass" v-if="currentType === 'type2' || currentType === 'type4'">添加大类</el-button>
      <el-button @click="addMulClass" v-if="currentType === 'type2' || currentType === 'type4'">多选添加</el-button>
    </div>
    <div class="dict-wrapper clearfix">
      <el-card v-for="dict in dictList" :key="dict.id"  class="box-card">
        <div slot="header" class="clearfix">
          <span>{{dict.name}}
            <i class="el-icon-plus" style="margin-left: 10px;" @click="openAdd(dict)"></i>
            <i class="el-icon-edit-outline" v-if="dict.id !== 'origindata'"  @click="openEdit(dict)"></i>
            <i class="el-icon-delete" v-if="dict.id !== 'origindata'"  @click="removeItem(dict.id)"></i>
          </span>
        </div>
        <div v-for="child in dict.children" :key="child.id" class="child-item">
          {{child.name}}({{child.code}})<i v-if="dict.id !== 'origindata'" style="margin-left: 10px;"  class="el-icon-edit-outline" @click="openEdit(child)"></i>
          <i v-if="dict.id !== 'origindata'"  class="el-icon-delete" @click="removeItem(child.id)"></i>
        </div>
      </el-card>
    </div>
    <el-dialog :title="form.id ? '编辑分类': '添加分类'" :visible.sync="showForm" width="600px"> 
      <el-form :model="form" style="padding-right:100px;">
        <el-form-item v-if="showMultiple" label="多选分类：" label-width="120px">
          <el-select style="width: 100%;" v-model="multipleValue" multiple placeholder="请选择">
            <el-option
              v-for="item in dictList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段：" label-width="120px">
          <el-input type="text" v-model="form.typeList[0].name" />
        </el-form-item>
        <el-form-item label="编号：" label-width="120px">
          <el-input type="text" v-model="form.typeList[0].code" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showForm = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      dictList: [],
      showForm: false,
      form: {
        pids: '',
        typeList: [{
          name: '',
          code: '',
          needSwitchNo: false,
          requiredFields: ''
        }]
      },
      formVerify: {
        name: '请输入字段内容'
      },
      currentType: 'type1',
      dictAll: [],
      multipleValue: '',
      showMultiple: false,
    }
  },
  async mounted() {
    await this.getAllDict();
    this.getDict('type1');
  },
  methods:{
    openAdd(dict) {
      this.form = {
        pids: dict.id,
        typeList: [{
          name: '',
          code: '',
        }]
      }
      this.showMultiple = false;
      this.showForm = true;
    },
    getData(val) {
      this.getDict(val);
    },
    addBigClass() {
      this.form = {
        pids: '',
        typeList: [{
          name: '',
          code: '',
        }]
      }
      if(this.currentType === 'type2') {
        this.form.pids = this.dictAll[3].id;
      }else if(this.currentType === 'type4') {
        this.form.pids = this.dictAll[2].id;
      }
      this.showMultiple = false;
      this.showForm = true;
    },
    addMulClass() {
      this.form = {
        pids: '',
        typeList: [{
          name: '',
          code: ''
        }]
      }
      this.multipleValue = [];
      this.showMultiple = true;
      this.showForm = true;
    },
    openEdit(dict) {
      this.form = {
        pids: dict.pids,
        typeList: [{
          id: dict.id,
          name: dict.name,
          code: dict.code,
        }]
      }
      this.showMultiple = false;
      this.showForm = true;
    },
    async getAllDict() {
      this.dictAll = await this.$httpN.postQ('pac/type/title');
    },
    async getDict(type) {
      if(type === 'type1') {
        this.dictList = [this.dictAll[0]];
      }else if(type === 'type2') {
        let arr = formUtil.deepCopy(this.dictAll[3].children);
        arr.forEach((item) => item.children = []);
        arr.forEach(async (item) => {
          item.children = await this.$httpN.postQ('pac/type/listByPid', {pid: item.id});
        })
        this.dictList = arr;
      }else if(type === 'type3') {
        this.dictList = [this.dictAll[1]];
      }else if(type === 'type4') {
        let arr = formUtil.deepCopy(this.dictAll[2].children);
        arr.forEach((item) => item.children = []);
        arr.forEach(async (item) => {
          item.children = await this.$httpN.postQ('pac/type/listByPid', {pid: item.id});
        })
        this.dictList = arr;
      }else if(type === 'type5') {
        let result = await this.$httpN.get('pac/type/switchNoList');
        let parent = [{
          children: result,
          id: '30101',
          name: '开关数类型列表'
        }]
        this.dictList = parent;
      }
    },
    async saveForm() {
      if(this.showMultiple) this.form.pids = this.multipleValue.join(',');

      if(!await this.$httpN.postB('pac/type/save', this.form)) return;
      formUtil.submitSuccess('保存成功');
      this.showForm = false;
      await this.getAllDict();
      this.getDict(this.currentType);
    },
    removeItem(id) {
      formUtil.submitConfirm('此操作将永久删除字典或字段, 是否继续?', async ()=> {
        if(!await this.$httpN.postB('pac/type/delete', [id], false)) return;
        formUtil.submitSuccess('删除成功');
        await this.getAllDict();
        this.getDict(this.currentType);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .xtsz-wrapper{
    padding: 20px;
    height: calc(100vh - 170px);
    overflow: auto;
    .dict-wrapper{
      display: flex;
      flex-wrap: wrap;
    }
    .box-card{
      i{
        cursor: pointer;
        margin-right: 3px;
      }
      width:300px;
      margin: 0 10px 10px;
      .child-item{
        margin-bottom: 5px;
      }
    }
  }
</style>